import { Table, Space, Card, Button, Modal, Form, Input, message, Select } from 'antd';
import { useEffect } from 'react';
import { useState } from 'react';
import { inviteMem, queryMem, changeMem } from "../vo/request"
export const MemberSettings = function () {
    const { Option } = Select;
    const [memdata, setMemdata] = useState([{}]);
    const [visable, setVisable] = useState(false);
    const [role, setRole] = useState(3);
    const [form] = Form.useForm();
    const pid = sessionStorage.getItem("project");
    let me = sessionStorage.getItem("username");
    const column = [
        {
            title: '姓名',
            dataIndex: 'username',
            key: 'username',
        },
        {
            title: '职级',
            dataIndex: 'role',
            key: 'role',
            render: (value: any, record: any) => {
                if (value === 0) {
                    return "创建者";
                } else if (record.username === me) {
                    switch (value) {
                        case 1:
                            return "管理员"
                        case 2:
                            return "协作者"
                        case 3:
                            return "成员"
                    }
                } else if (role <= 1) {
                    return (
                        <Select defaultValue={value} style={{width:"100px"}}
                            onChange={
                                async(value)=>{
                                    if(pid && me){
                                        // console.log(pid,me,role);
                                        let res = await changeMem(parseInt(pid) ,record.username, value);
                                        if(res.data){
                                            message.success("修改成功");
                                        }else{
                                            message.error("修改失败," + res.msg);
                                        }
                                    }
                                    
                                    
                                }
                            }
                        >
                            <Option value={1}>管理员</Option>
                            <Option value={2}>协作者</Option>
                            <Option value={3}>成员</Option>
                        </Select>
                    )
                } else {
                    switch (value) {
                        case 1:
                            return "管理员"
                        case 2:
                            return "协作者"
                        case 3:
                            return "成员"
                    }
                }
            }
        },
        {
            title: '操作',
            key: 'action',
            render: (value: any, record: any) => {
                if (role <= 1) {
                    if( value === 0 ){
                        
                        return '';
                    }else if (record.username === me) {
                        return '';
                    }
                    return (
                        <Space size="middle">
                            <Button type="primary" danger 
                                onClick={
                                    ()=>{

                                    }
                                }
                            >
                                删除
                            </Button>
                        </Space>
                    )
                }
            }



        },
    ];

    const invite = async (id: number, name: string) => {
        let res = await inviteMem(id, name);
        if (res.data) {
            setVisable(false);
            message.success("邀请成功,等待对方同意");
        } else {
            setVisable(false);
            message.error("邀请失败," + res.msg);
        }
    };
    useEffect(() => {
        (async () => {
            if (pid) {
                let result = await queryMem(parseInt(pid));
                for (let item of result.data) {
                    if (item.username === me) {
                        setRole(parseInt(item.role))
                    }
                }
                console.log(result);
                setMemdata(result.data);
            } else {
                message.error("未登录"); return (<></>)
            }
        })()
    }, []);


    return (
        <>
            <Card>
                <Table key={role} columns={column} dataSource={memdata} />
                <Button
                    onClick={() => {
                        setVisable(true);
                    }}
                >
                    邀请成员
                </Button>
            </Card>
            <Modal
                title="邀请成员"
                visible={visable}
                okText="确认"
                cancelText="取消"
                onCancel={
                    () => {
                        setVisable(false);
                    }
                }
                onOk={
                    () => {
                        form
                            .validateFields()
                            .then(values => {
                                form.resetFields();
                                if (pid) {
                                    invite(parseInt(pid), values.username);
                                } else {
                                    message.error("未登录"); return (<></>)
                                }

                            })
                            .catch(info => {
                                console.log('Validate Failed:', info);
                            });
                    }
                }
            >
                <Form
                    form={form}
                >
                    <Form.Item
                        label="用户名"
                        name="username"
                    >
                        <Input placeholder="请输入要邀请用户的用户名" />
                    </Form.Item>
                </Form>
            </Modal>
        </>
    )
}
